<!--  线 + 柱混合图 -->
<template>
  <el-card>

    <div :id="id" :class="className" :style="{ height, width }" />
  </el-card>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

import { listNyt7StatisticsInsureNumRegion } from '@/api/Nyt7StatisticsInsureNumRegion/Nyt7StatisticsInsureNumRegion';
import { ref, watch, onMounted, onBeforeUnmount, onActivated, markRaw } from 'vue';

const company = ref([]);
const processedData = ref([]);
const chart: Ref<echarts.ECharts | null> = ref(null);

const props = defineProps({
  id: {
    type: String,
    default: 'charts_company'
  },
  className: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '200px',
    required: true
  },
  height: {
    type: String,
    default: '200px',
    required: true
  },
  Nyt7StatisticsClaimAreaCompanyList: {
    type: Array as () => any,
    default: () => []
  }
});

const option = {
  title: {
    text: '保险公司统计',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      return params.seriesName + '<br/>' +
        params.name + ' : ' + params.value + '亩 (' + params.percent + '%)';
    }
  },
  legend: {
    top: '10%',
    left: 'center'
  },
  series: [
    {
      name: '已决赔款面积：',
      type: 'pie',
      center: ['50%', '55%'],
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        position: 'outside',
        formatter: function (params) {
          return params.name + ' : ' + params.value + '元 (' + params.percent + '%)';
        }
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 25,
          fontWeight: 'bold',
          formatter: function (params) {
            return params.name + ' : ' + params.value + '元 (' + params.percent + '%)';
          }
        }
      },
      labelLine: {
        show: true
      },
      data: []
    }
  ]
};

const handleResize = () => {
  setTimeout(() => {
    if (chart.value) {
      chart.value.resize();
    }
  }, 100);
};


onMounted(async () => {
  chart.value = markRaw(echarts.init(document.getElementById(props.id) as HTMLDivElement));
  chart.value.setOption(option);
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});

onActivated(() => {
  handleResize();
});

// 监听 chartData 的变化并更新图表
watch(
  () => props.Nyt7StatisticsClaimAreaCompanyList,
  (newData) => {
  console.log(newData);
    if (newData) {
      console.log(newData);
      newData = newData.map((item) => {
        return [item.company, item.claimArea, item.areaRatio];
      });
      const data = newData.map((item) => ({ value: item[1], name: item[0], createTime: item[3] }));
      console.log(data);
      //更新 option
      chart.value.setOption({
        series: [
          {
            data: data
          }
        ]
      });
    }
  }
);
</script>

<style lang="scss" scoped></style>
